<template>
  <div class="">
    <el-dialog :title="admin.id?'修改':'添加'" :close-on-click-modal="false" v-model="dialogVisible" :before-close="handleClose"
      style="padding: 50px; width: 600px;;">
      <el-form ref="ruleFormRef" :rules="rules" :model="admin">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="admin.name" />
        </el-form-item>
        <div style="max-height: 380px;overflow-y: auto;">
          <el-form-item label="权限" prop="menus">
            <el-tree ref="treeRef" :render-after-expand="false" @check-change="change" node-key="id" style="max-width: 600px" show-checkbox
              :data="menuData"  :props="defaultProps" />
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submit">{{admin.id?'修改':'添加'}}</el-button>
          <el-button type="primary" @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang='ts' setup>
import { ref, watch, reactive, onMounted } from "vue"
import { add } from '../service/administratorrole/type'
import { administratorroleadd, menulist } from '../service/administratorrole/administratorrole'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import setcheckedKeys  from 'element-plus'

interface RuleForm {
  name: string;
  menus: number[];
}


const treeRef = ref<any>()
const ruleFormRef = ref<FormInstance>(
)

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
  ],
  menus: [
    { required: true, message: '请选择角色权限', trigger: 'blur' },
  ],
})

const porps = defineProps({
  editData: {
    type: [Object],
    default: () => ({})
  },
})

const admin = reactive<add>({
  name: '',
  id: 0,
  menus: []
})
const dialogVisible = ref(true)
const emit = defineEmits(['close', 'add'])
const handleClose = () => {
  admin.id = 0
  admin.menus = []
  admin.name = ''
  dialogVisible.value = false
  emit('close', [])
}

const menuData = ref([])
const defaultProps = {
  children: 'children',
  label: 'name',
  id: "id"
}

//监听变化
const change = (a: any, b: any, c: any) => {
  console.log(a.id, b, c);
  if (b) {
    admin.menus.push(a.id)
  } else {
    admin.menus = admin.menus.filter(item => item != a.id)
  }
}
//添加
const adding = async () => {
  console.log(33);
  admin.menus = admin.menus.map((item: any) => ({ id: item }));
  let res: any = await administratorroleadd(admin)
  if (res.errCode === 10000) {
    emit('add', [])
  }
}

const submit = () => {
  console.log(22);
  ruleFormRef.value?.validate((vaild, fields) => {
    if (vaild) {
      console.log(11);
      adding()
    }
  })
}
const getmenulist = async () => {
  let res: any = await menulist(admin.id)
  menuData.value = res.data.list

  console.log(999,porps.editData.menus);
  
treeRef.value.setCheckedKeys(porps.editData.menus)

}


onMounted(() => {
  admin.id = porps.editData.id
  admin.name = porps.editData.name
  admin.menus = porps.editData.menus
  getmenulist()

})
</script>

<style scoped></style>
